<template>
  <div class="detail">
    <div class="album-black">
      <p>唱片管理</p>
    </div>
    <h2>您查看的唱片ID为:{{ id }}</h2>
    <div class="detail-box">
      <ul>
        <li>
          <div class="title">
            <h4>唱片名称：</h4>
            <h4>歌手：</h4>
            <h4>价格：</h4>
            <h4>库存：</h4>
          </div>
          <div class="content">
            <h4>{{ detail.album }}</h4>
            <h4>{{ detail.singer }}</h4>
            <h4>{{ detail.price }}</h4>
             <el-input :value="detail.stock">
              <template slot="append">调整</template>
              <!-- <el-button type="primary">主要按钮</el-button> -->
            </el-input>
          </div>
        </li>
        <el-button type="primary" @click="$router.back('/')">返回列表</el-button>
      </ul>
    </div>
  </div>
</template>
<script>
import list from './album-list.js'
export default{
  data(){
      return {
          id:'',
          list
      }
  },
   computed:{
      detail(){
        return this.list.find(i=>i.id===this.id) || {}
      }
    },
  created(){
    // console.log(this.$route);
      this.id=this.$route.query.id
    }
}
</script>

<style lang="sass" scoped>
.detail 
  margin: 0 auto
  width: 1000px
  height: 500px
  h2
    margin-top: 10px
    margin-left: -600px
  .album-black 
    background: #333
    width: 100%
    color: #fff
    text-align: left
    padding-left: 44px
    line-height: 120px
    font-size: 36px
  .detail-box 
    margin-left: 50px
    margin-top: 20px
    width: 370px
    height: 166px
    background: rgb(229,229,229)
    position: relative
    li
      display: flex
      justify-content: center
      align-items: center
      line-height: 40px
      & h4:nth-child(1)
        margin-left: -40px
      .content 
        text-align: left
        & h4:nth-child(1)
          margin-left: 0px
        & .el-input
          width: 150px
          height: 33px
    .el-button
      position: absolute
      left: 0
      top: 200px
</style>